<template>
  <div class="classifyxq">
    <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="scroll">
       <div class="scr-ct" v-if="goodsList.length">
          <my-card v-for="(item,index) in goodsList" :key="index" :itemObj="item"></my-card>
       </div>
       <van-empty v-else description="暂无数据" />
    </div>
  </div>
</template>
<script>
import { ref } from 'vue';
import myCard from '../../components/myCard';
import { getGoods } from "../../api/home/index.js";
import { useRoute } from 'vue-router';
export default {
  components:{ myCard },
  setup(props) {
    const { params } = useRoute();
    const goodsList = ref([]); // 所有的商品数据
    getGoods().then(res => {
       goodsList.value = res.data.filter(item => item.categoryId == params.id);
    })
    return {
      goodsList  
    }
  }
}
</script>

<style lang="scss" scoped>
.classifyxq{
  height: 100%;
}
.scroll{
  height: calc(100% - 46px);
  overflow: auto;
}
.scr-ct{
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;
  justify-content: space-between;
}
</style>

